<template>
  <div class="content">
    <el-breadcrumb separator="/">
      <el-breadcrumb-item class="el-bread-one" style="color: red"
        >仓库管理</el-breadcrumb-item
      >
      <el-breadcrumb-item>盘点列表</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="tab">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="盘点中" name="0"></el-tab-pane>
        <el-tab-pane label="已完成" name="1"></el-tab-pane>
      </el-tabs>
    </div>
    <el-collapse-transition>
      <div class="query" v-show="isShowForm">
        <div class="header">
          <span>数据查询</span>
          <p
            style="font-size: 14px; color: #409eff; cursor: pointer"
            @click="isShowForm = false"
          >
            收起
          </p>
        </div>
        <el-form ref="form" :model="form" label-width="80px">
          <el-form-item label="订单信息">
            <el-input
              size="small"
              placeholder="请输入盘点编号/商品信息"
              v-model="form.info"
            ></el-input>
          </el-form-item>
          <el-form-item label="制单人">
            <el-select
              size="small"
              clearable
              v-model="form.preparedBy"
              placeholder="请选择制单人姓名"
            >
              <el-option
                v-for="item in preparedData"
                :key="item.label"
                :label="item.value"
                :value="item.label"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="仓库名称">
            <el-select
              size="small"
              clearable
              v-model="form.warId"
              placeholder="请选择仓库名称"
            >
              <el-option
                v-for="item in wareData"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="制单时间">
            <el-date-picker
              clearable
              v-model="form.date"
              type="daterange"
              size="small"
              align="right"
              unlink-panels
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              value-format="yyyy-MM-dd"
              :picker-options="pickerOptions"
            >
            </el-date-picker>
          </el-form-item>
          <div style="margin-top: 6px">
            <el-button size="mini" type="primary" @click="getList(1)"
              >搜索</el-button
            >
            <el-button
              size="mini"
              @click="
                (form = {
                  info: '',
                  preparedBy: '',
                  warId: '',
                  date: [],
                }),
                  getList()
              "
              >重置</el-button
            >
          </div>
        </el-form>
      </div>
    </el-collapse-transition>
    <div class="buttonCont">
      <el-button @click="exportEx" size="mini" type="primary"
        ><i class="el-icon-upload el-icon--left"></i> 导出</el-button
      >
      <el-select v-model="value" @change="tpPrintJS" placeholder="打印">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
      <el-button
        type="primary"
        size="mini"
        @click="isShowForm = true"
        v-show="!isShowForm"
        style="position: absolute; right: 10px"
        >搜索展开</el-button
      >
    </div>
    <div class="tableContext">
      <el-table
        @row-click="rowClick"
        @selection-change="handleSelectionChange"
        ref="multipleTable"
        :data="tableData.list"
        style="width: 100%"
      >
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column type="index" width="50" label="序号"></el-table-column>
        <el-table-column prop="oddNumbers" label="盘点编号"> </el-table-column>
        <el-table-column prop="progressBar" label="进度"> </el-table-column>
        <el-table-column prop="proposerName" label="制单人"> </el-table-column>
        <el-table-column prop="createTime" label="制单时间">
          <template slot-scope="scope">
            {{ $moment(scope.row.createTime) }}
          </template>
        </el-table-column>
        <el-table-column prop="updateTime" label="更新时间">
          <template slot-scope="scope">
            {{ $moment(scope.row.updateTime) }}
          </template>
        </el-table-column>
        <el-table-column label="操作" v-if="activeName == 0">
          <template slot-scope="scope">
            <div class="table_column_font" v-if="scope.row.isSelf == 1">
              <span @click.stop="toCheckFillIn(scope.row)">盘点</span>

              <span
                v-if="scope.row.isCheck == 1"
                @click.stop="accomplish(scope.row, scope.$index)"
                >完成</span
              >
              <span
                @click.stop="del(scope.row, scope.$index)"
                style="color: red"
                >删除</span
              >
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-drawer
      size="50%"
      :withHeader="false"
      append-to-body
      :visible.sync="drawer"
      :show-close="false"
      @close="isMyTable = false"
      direction="rtl"
    >
      <div class="drawerContext">
        <div class="title">
          <i
            class="el-icon-close"
            @click="drawer = false"
            style="cursor: pointer"
          ></i
          ><span style="margin-left: 20px">盘点单详情</span>
        </div>
        <div class="left">
          <div class="tableBorder">
            <div class="title">
              <span>盘点编号：{{ detail.oddNumbers }}</span>
              <span>
                <span style="margin-right: 20px"
                  >申请人：{{ detail.proposerName }}
                </span>
                <span> 创建时间：{{ $moment(detail.createdTime) }}</span>
              </span>
            </div>
            <my-table
              v-if="isMyTable"
              :column="tableDatas.column"
              :data="tableDatas.data"
              border
            >
            </my-table>
          </div>
        </div>
      </div>
    </el-drawer>
    <div style="position: fixed; top: -99999px">
      <div id="printCons" v-if="isMyTablePdf">
        <div
          v-for="(itemArray, i) in tableDatasPdf"
          :key="i"
          style="width: 800px; border: 1px solid #ebeef5;margin-top:20px;"
        >
          <div
            v-for="(item, index) in itemArray.array"
            :key="index + 't'"
            class="title"
            style="border: 1px solid #ebeef5;"
          >
            <span>盘点编号：{{ itemArray.oddNumbers }}</span>
            <span>
              <span style="margin-right: 20px"
                >申请人：{{ itemArray.proposerName }}
              </span>
              <span> 创建时间：{{ $moment(itemArray.createdTime) }}</span>
            </span>
            <my-table :column="item.column" :data="item.data" border>
            </my-table>
            <!-- <div  style="page-break-after: always"></div> -->
          </div>
        </div>
      </div>
    </div>
    <div style="height: 50px"></div>
    <!-- 分页start -->
    <div class="page" v-if="tableData.totalNum > 0">
      <div class="block">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="tableData.pageNo"
          :page-sizes="[10, 20, 50, 100, 200]"
          :page-size="tableData.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="tableData.totalNum"
          prev-text="上一页"
          next-text="下一页"
        >
        </el-pagination>
      </div>
    </div>
    <!-- 分页end -->
  </div>
</template>
<script>
import printJS from "print-js";
import MyTable from "../../../../components/lb-table/lb-table";
import loginVue from "../../../login/login.vue";
export default {
  components: {
    MyTable: MyTable,
  },
  data() {
    return {
      options: [
        {
          value: "0",
          label: "仓库盘点表",
        },
        {
          value: "1",
          label: "盘点数据",
        },
      ],
      value: "",
      isMyTable: false,
      tableDatas: {
        column: [],
        data: [],
      },
      isMyTablePdf: false,
      tableDatasPdf: [],
      drawer: false,
      activeName: "0",
      isShowForm: true,
      preparedData: [],
      detail: {
        goods: [],
      },
      form: {
        info: "",
        preparedBy: "",
        warId: "",
        date: [],
      },
      wareData: [],
      multipleSelection: [],
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      tableData: {
        list: [],
        pageNo: 1,
        pageSize: 10,
      },
    };
  },
  created() {
    this.getList();
  },
  activated() {
    this.wareList();
    if (this.$route.query.isLoad) {
      this.getList();
    }
  },
  methods: {
    handleSizeChange(val) {
      this.tableData.pageSize = val;
      this.getList();
    },
    handleCurrentChange(e) {
      this.tableData.pageNo = e;
      this.getList();
    },
    accomplish(e, index) {
      this.axios
        .post("/order/stockControl/finishCheck", new Array(e.oddNumbers), {
          headers: {
            isLoading: false,
          },
        })
        .then((res) => {
          if (res.code == 0) {
            this.tableData.list.splice(index, 1);
            this.$message.success("已完成");
          } else {
            this.$message.error(res.message);
          }
        });
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    exportEx() {
      if (!this.multipleSelection.length) {
        this.$message.warning("没选择");
        return;
      }
      this.download(
        "/order/stockControl/checkExportExcel",
        this.multipleSelection.map((res) => res.oddNumbers)
      );
    },
    rowClick(e) {
      this.drawer = true;
      this.axios
        .get("/order/stockControl/checkDetails?oddNumber=" + e.oddNumbers, {})
        .then((res) => {
          this.detail = res.data;
          this.$set(this.tableDatas, "column", [
            {
              prop: "index",
              label: "序列",
              type: "index",
              width: "55",
            },
            {
              prop: "index",
              label: "商品名称",
              prop: "goodsName",
            },
          ]);
          this.tableDatas.data = [];
          if (res.data.goods[0].checkNumberDetails) {
            res.data.goods[0].checkNumberDetails.forEach((item, index) => {
              this.tableDatas.column.push({
                label: `${
                  !index
                    ? this.$moment(item.createdTime) + " 初盘"
                    : this.$moment(item.createdTime) + " 复盘" + index
                }`,
                children: [
                  {
                    label: "实际库存",
                    prop: "checkNumberDetails",
                    render: (h, scope) => {
                      return (
                        <span>
                          {
                            res.data.goods[scope.$index].checkNumberDetails[
                              index
                            ].quantity
                          }
                        </span>
                      );
                    },
                  },
                  {
                    prop: "checkNumberDetails",
                    label: "盘点库存",
                    render: (h, scope) => {
                      return (
                        <span>
                          {
                            res.data.goods[scope.$index].checkNumberDetails[
                              index
                            ].checkQuantity
                          }
                        </span>
                      );
                    },
                  },
                  {
                    prop: "checkNumberDetails",
                    label: "差异",
                    render: (h, scope) => {
                      return (
                        <span>
                          {
                            res.data.goods[scope.$index].checkNumberDetails[
                              index
                            ].differNumber
                          }
                        </span>
                      );
                    },
                  },
                ],
              });
            });
          }
          this.tableDatas.column.push({
            prop: "index",
            label: "盘点仓库",
            prop: "warNames",
          });
          this.tableDatas.data = res.data.goods;
          this.isMyTable = true;
        });
    },
    wareList() {
      this.axios
        .post("/order/stockControl/checkApplicantList", {
          headers: {
            isLoading: false,
          },
        })
        .then((res) => {
          if (res.code == 0) {
            this.preparedData = res.data;
          } else {
            this.$message.error(res.message);
          }
        });
      this.axios
        .post("/order/comm/commWarehouse/list",{
        pageSize:999,
        pageNo:1
      }, {
          headers: {
            isLoading: false,
          },
        })
        .then((res) => {
          if (res.code == 0) {
            this.wareData = res.data.list;
          } else {
            this.$message.error(res.message);
          }
        });
    },
    getList(e) {
      if (e == 1) {
        this.tableData.pageNo = 1;
        this.tableData.pageSize = 10;
      }
      this.axios
        .post(
          "/order/stockControl/checkList",
          {
            keyWord: this.form.info,
            proposerName: this.form.preparedBy,
            warId: this.form.warId,
            startTime: this.form.date[0] ? this.form.date[0]+" 00:00:00" : "",
            progressBar: this.activeName == 0 ? "盘点中" : "完成",
            endTime: this.form.date[1] ? this.form.date[1]+" 59:59:59" : "",
            pageNo: this.tableData.pageNo,
            pageSize: this.tableData.pageSize,
          },
          {
            headers: {
              isLoading: true,
            },
          }
        )
        .then((res) => {
          if (res.code == 0) {
            this.tableData = res.data;
          } else {
            this.$message.error(res.message);
          }
        });
    },
    tpPrintJS() {
      this.tableDatasPdf = [];
      this.isMyTablePdf = false;
      if (this.multipleSelection.length < 1) {
        this.$message.warning("请选择");
        this.value = "";
        return;
      }
      this.multipleSelection.forEach((m) => {
        this.axios
          .get("/order/stockControl/checkDetails?oddNumber=" + m.oddNumbers, {})
          .then((res) => {
            this.detail = res.data;
            this.dataSeparation(res);
          });
      });
      this.isMyTablePdf = true;
      setTimeout((st) => {
        printJS({
          printable: "printCons",
          targetStyles: ["*"],
          type: "html",
        });
        this.value = "";
      }, 1000);
    },
    handleClick(e) {
      this.getList();
    },
    dataSeparation(res) {
      let tempTableDatasPdf = {
        array: [],
        oddNumbers: "",
        proposerName: "",
        createdTime: "",
      };
      tempTableDatasPdf.oddNumbers = res.data.oddNumbers;
      tempTableDatasPdf.proposerName = res.data.proposerName;
      tempTableDatasPdf.createdTime = res.data.createdTime;
      if (res.data.goods[0].checkNumberDetails && this.value == "1") {
        res.data.goods[0].checkNumberDetails.forEach((item, index) => {
          tempTableDatasPdf.array[index] = {
            column: [
              {
                prop: "index",
                label: "序列",
                type: "index",
                width: "55",
              },
              {
                prop: "index",
                label: "商品名称",
                prop: "goodsName",
              },
            ],
            data: [],
          };

          tempTableDatasPdf.array[index].column.push({
            label: `${
              !index
                ? this.$moment(item.createdTime) + " 初盘"
                : this.$moment(item.createdTime) + " 复盘" + index
            }`,
            children: [
              {
                label: "实际库存",
                prop: "checkNumberDetails",
                render: (h, scope) => {
                  return (
                    <span>
                      {
                        res.data.goods[scope.$index].checkNumberDetails[index]
                          .quantity
                      }
                    </span>
                  );
                },
              },
              {
                prop: "checkNumberDetails",
                label: "盘点库存",
                render: (h, scope) => {
                  return (
                    <span>
                      {
                        res.data.goods[scope.$index].checkNumberDetails[index]
                          .checkQuantity
                      }
                    </span>
                  );
                },
              },
              {
                prop: "checkNumberDetails",
                label: "差异",
                render: (h, scope) => {
                  return (
                    <span>
                      {
                        res.data.goods[scope.$index].checkNumberDetails[index]
                          .differNumber
                      }
                    </span>
                  );
                },
              },
            ],
          });
          tempTableDatasPdf.array[index].column.push({
            prop: "index",
            label: "盘点仓库",
            prop: "warNames",
          });
          let tempObj = JSON.parse(JSON.stringify(res.data.goods));
          tempObj.forEach((i) => {
            i.checkNumberDetails = new Array(i.checkNumberDetails[index]);
          });
          tempTableDatasPdf.array[index].data = tempObj;
        });
      } else {
        tempTableDatasPdf.array[0] = {
          column: [
            {
              prop: "index",
              label: "序列",
              type: "index",
              width: "55",
            },
            {
              prop: "index",
              label: "商品名称",
              prop: "goodsName",
            },
          ],
          data: [],
        };
        let tempLength = res.data.goods[0].checkNumberDetails;
        let bool = false;
        if (tempLength == null) {
          bool = true;
        } else if (tempLength && !(tempLength.length - 1)) {
          bool = true;
        }
        tempTableDatasPdf.array[0].column.push({
          label: `${
            bool
              ? tempLength != null
                ? this.$moment(tempLength[tempLength.length - 1].createdTime)
                : "" + " 初盘"
              : this.$moment(tempLength[tempLength.length - 1].createdTime) +
                " 复盘" +
                (tempLength.length - 1)
          }`,
          children: [
            {
              label: "实际库存",
              prop: "checkNumberDetails",
              render: (h, scope) => {
                return <span>{
                  scope.row.realTimeQuantity
                }</span>;
              },
            },
            {
              prop: "checkNumberDetails",
              label: "盘点库存",
              render: (h, scope) => {
                return <span>{null}</span>;
              },
            },
            {
              prop: "checkNumberDetails",
              label: "差异",
              render: (h, scope) => {
                return <span>{null}</span>;
              },
            },
          ],
        });
        tempTableDatasPdf.array[0].column.push({
          prop: "index",
          label: "盘点仓库",
          prop: "warNames",
        });
        tempTableDatasPdf.array[0].data = res.data.goods;
      }
      this.tableDatasPdf.push(tempTableDatasPdf);
    },
    del(row, index) {
      this.axios
        .get("/order/stockControl/closeCheck?oddNumber=" + row.oddNumbers, {
          headers: {
            isLoading: false,
          },
        })
        .then((res) => {
          if (res.code == 0) {
            this.tableData.list.splice(index, 1);
            this.$message.success("删除成功");
          } else {
            this.$message.error(res.message);
          }
        });
    },
    toCheckFillIn(e) {
      this.$router.push({
        name: "checkFillIn",
        query: {
          obj: JSON.stringify({
            oddNumbers: e.oddNumbers,
            isHc: 1,
            isFp: 1,
          }),
        },
      });
    },
  },
};
</script>
<style lang="scss" scoped>
/deep/.el-drawer__body {
  overflow-y: auto;
}
/deep/.el-table__header {
  width: 100% !important;
}

/deep/.el-table__body {
  width: 100% !important;
}
/deep/.el-drawer:focus {
  outline: none;
}
.drawerContext {
  .title {
    border-bottom: 1px solid #d9d9d9;
    padding: 10px;
  }
  .left {
    height: 100%;
    background: #fff;
    border-radius: 10px;
    padding: 10px 20px;
    box-sizing: border-box;
  }
}
.tableBorder {
  border: 1px solid #d9d9d9;
  margin-top: 10px;
  .title {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    border-bottom: 1px solid #d9d9d9;
    font-size: 14px;
    padding: 10px 10px;
  }
}
.page {
  padding-right: 20px;
  text-align: right;
  width: 98%;
  position: fixed;
  bottom: 0;
  right: 0;
  background: #fff;
  z-index: 100;

  span {
    font-size: 15px;
    color: #666;
    display: inline-block;
    margin-left: 10px;
    vertical-align: middle;
  }

  .el-pagination {
    display: inline-block;
    vertical-align: middle;
  }

  /deep/.el-input--suffix .el-input__inner {
    background: #fff;
    color: #000;
    width: 104px;
    box-shadow: none;
  }
}
.content {
  /deep/.el-bread-one .el-breadcrumb__inner {
    font-size: 15px;
    color: #4168e7;
  }
  .tab {
    margin-top: 10px;
    background: #fff;
    padding: 0px 20px;
    border-radius: 10px;
    /deep/.el-tabs__header {
      margin: 0;
    }
  }
  .query {
    background: #fff;
    padding: 10px;
    margin-top: 10px;
    border-radius: 10px;
    .header {
      padding-bottom: 10px;
      display: flex;
      justify-content: space-between;
      align-items: center;

      span {
        font-size: 15px;
        color: #333;
      }

      p {
        color: #333;
        font-size: 12px;
      }
    }
    /deep/.el-form {
      display: flex;
      flex-wrap: wrap;
      /deep/.el-input__inner {
        width: 220px;
      }
      /deep/ .el-form-item label:after {
        content: "";
        display: inline-block;
        width: 100%;
      }
      /deep/ .el-form-item__label {
        text-align: justify;
        height: 50px;
      }
      /deep/.el-form-item {
        margin-right: 10px;
      }
    }
  }
  .buttonCont {
    margin: 10px 0;
    display: flex;
    & ::placeholder {
      color: #fff;
      font-size: 10px;
    }
    /deep/.el-input__inner {
      margin-left: 5px;
      width: 110px;
      text-align: center;
      height: 30px;
      line-height: 30px;
      background: #409eff;
      color: #fff;
    }
    /deep/.el-input__icon {
      height: 30px;
      line-height: 30px;
      color: #fff;
    }
  }
  .tableContext {
    .table_column_font {
      width: 100px;
      color: #4168e7;
      display: flex;
      justify-content: flex-start;
      span {
        margin: 0px 5px;
        cursor: pointer;
        white-space: nowrap;
      }
    }
    /deep/.cell {
      display: flex;
      justify-content: center;
    }
  }
}
</style>
